<template>
	<view class="centent">
		<text class="label">欢迎注册</text>
		<view class="flex-wrap input-wrap">
		<text class="label">姓名：</text>
		<input value="" class="account-info-input" placeholder="请输入姓名"  @input="onInput1" type="text" >
		</view>
		
		<view class="flex-wrap input-wrap">
		<text class="label">学号：</text>
		<input value=""  class="account-info-input" placeholder="请输入12位的学号" maxlength="12" @input="onInput2" type="number" >
		</view>
		
		<view class="flex-wrap input-wrap">
		<text class="label">密码 ：</text>
		<input password="" class="account-info-input"  placeholder="请设置至少为6个数字密码" @input="onInput3"  >
		</view>
		
		<view class="flex-wrap input-wrap">

		<text >性别：</text>
		     <radio-group @change="radioChange" >
		                    <label  v-for="(sex, index) in sex" :key="sex.value" style="float: left;">
		                        <view style="float: left;">
		                            <radio :value="sex.value" :checked="index === 0" /> 
									
		                        </view>
		                       <view style="float: left; margin: 0px; padding: 5px;" >{{sex.name}}</view>
		                    </label>
		                </radio-group>
		</view>
		
		<view class="flex-wrap input-wrap">
		<text class="label">年龄 ：</text>
		<input value="" class="account-info-input"  placeholder="请输入年龄" @input="onInput4" type="number" >
		</view>
		
		<view class="flex-wrap input-wrap">
		<text class="label">手机号：</text> 
		<input value=""  class="account-info-input" type="number" placeholder="可用于登录和找回密码" @input="onInput5" maxlength="11"  >
		</view>
		
		<view class="flex-wrap input-wrap" >
		<text class="label" >验证码:</text>
		<input class="account-info-input"   placeholder="注意大小写"  @input="onInput6 " vae="" maxlength="4" >
		</view>
		
	    <view class="register">
					<view class="canvas-img-code" @click="refresh()">
					<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
		            <text>看不清?点击图片换一张</text>    
		</view>
		</view>
	<button class="mysubmit" type="primary" form-type="submit" @click="goregister()"  >注册</button>
	</view>
</template>

<script>
	var _this;
	export default{
			data(){
					
				return{
					username:'',//姓名
					num:'',	//学号
					pass:'',//密码
					sex:[{
						name:'男',
						value:0,
						checked:true,
					},{
						name:'女',
						value:1,
					}],//性别
					age:'',//年龄
					phone:'',	//电话号码		
					change:'',//验证码
				     str:'',//图片验证码
					width:120,
					height:50,
					
				}
			},
			onLoad() {
				uni.request({
					url: 'http://rap2api.taobao.org/app/mock/286869/user/register',
					method: 'GET',
					data: {
					},
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},	
			components: {
				
			},
			onShow() {
				_this = this;
				setTimeout(function() {
					_this.init();
				}, 1000)
			},

		methods:{
		
			 radioChange: function(e) {
				
				 console.log(e.detail)//获取输入框里面的内容
					
			            for (let i = 0; i < this.sex.length; i++) {
			                if (this.sex[i].value == e.detail.value) {
			                    this.current = i;
			                    break;
			                }
			            }
						
						
			        },
			onInput1(e){
				
				this.username=e.detail;
				var value = e.detail.value;
							
					let i = e.target.value
					let num = i.charAt(i.length-1)
					var reg=new RegExp("^[\u4E00-\u9FA5]{1,4}$")
					if(!reg.test(num)) {
						return i.slice(0,-1)
					} else {
						return i
					}	

				
			},
				onInput2(e){//获取输入框里面的内容
					this.num=e.detail;
 //过滤input密码类型只输入数字
						var value = e.detail.value;
							let i = e.target.value
							let num = i.charAt(i.length-1)
							var reg=new RegExp("^[0-9]*$")
						if(!reg.test(num)) {
							return i.slice(0,-1)
						} else {
							return i
						}		


										
				
				},
				
				onInput3(e){
					this.pass=e.detail;
						
				},
				
				onInput4(e){//获取输入框里面的内容
					this.age=e.detail;
 //过滤input密码类型只输入数字
 	                        var value = e.detail.value;
							let i = e.target.value
							let num = i.charAt(i.length-1)
							var reg=new RegExp("^[0-9]*$")
							if(!reg.test(num)) {
								return i.slice(0,-1)
							} else {
								return i
							}					
				},
				onInput5(e){
					this.phone=e.detail
					 	var value = e.detail.value;
					let i = e.target.value
					let num = i.charAt(i.length-1)
                     var reg=new RegExp("^[0-9]*$")
					if(!reg.test(num)) {
					return i.slice(0,-1)
					} else {
					return i
					}
					
				},
			    onInput6(e){
					this.change=e.target.value				
				},  
					
			goregister(){
			
			if(this.username==''||this.username.value.length<2){
				uni.showToast({
						title:'姓名错误',
						icon:'none',
						duration:2000,
				})
			}
			else if(this.num.value==null||this.num.value.length<12){
				uni.showToast({
				
						title:'学号错误',
						icon:'none',
						duration:2000,
				
				})
			}
			else if(this.pass.value==null||this.pass.value.length<6){
				uni.showToast({
				
						title:'密码错误',
						icon:'none',
						duration:2000,
				
				})
			}
			else if(this.sex.value==0){
				uni.showToast({
						title:'性别错误',
						icon:'none',
						duration:2000,
				
				})
			}
			else if(this.age.value==null||this.age.value.length>2){
				uni.showToast({
				
						title:'年龄错误',
						icon:'none',
						duration:2000,
				
				})
			}
			else if(this.phone.value==null||this.phone.value.length<11){
				uni.showToast({
				
						title:'手机号错误',
						icon:'none',
						duration:2000,
				
				})
			}
			else if(this.change==''||this.change!=this.str){
				uni.showToast({
						title:'验证码错误',
						icon:'none',
						duration:2000
				})
			}
			else {
				uni.showToast({
						title:'注册成功',
						icon:'none',
						duration:2000,
				
				}),
				setTimeout(function(){
					uni.navigateTo({
						url:'../register'
					})
				},1000);
			}
			},
			// 初始化验证码	    init: function() {
				    	console.log('start');	    	var context = uni.createCanvasContext('imgcanvas', this),	    		w = this.width,	    		h = this.height;	    	context.setFillStyle("white");	    	context.setLineWidth(5);	    	context.fillRect(0, 0, w, h);	    	var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R", "S",	    			"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"	    		],	    		str = '';	    	for (var i = 0; i < 4; i++) {	    		var c = pool[this.rn(0, pool.length - 1)];	    		var deg = this.rn(-30, 30);	    		context.setFontSize(18);	    		context.setTextBaseline("top");	    		context.setFillStyle(this.rc(80, 150));	    		context.save();	    		context.translate(30 * i + 15, parseInt(h / 1.5));	    		context.rotate(deg * Math.PI / 180);	    		context.fillText(c, -15 + 5, -15);	    		context.restore();	    		str += c;	    	}	    	uni.setStorage({	    		key: 'imgcode',	    		data: str,	    	});	    	for (var i = 0; i < 40; i++) {	    		context.beginPath();	    		context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);	    		context.closePath();	    		context.setFillStyle(this.rc(150, 200));	    		context.fill();	    	}	    	context.draw();				console.log('end');
				this.str=str;
								    		    },	    rc: function(min, max) {	    	var r = this.rn(min, max);	    	var g = this.rn(min, max);	    	var b = this.rn(min, max);	    	return "rgb(" + r + "," + g + "," + b + ")";		    },	    rn: function(max, min) {	    	return parseInt(Math.random() * (max - min)) + min;	    },	    refresh: function() {	    	this.init();	    },	    canvasIdErrorCallback: function(e) {	    	console.error(e.detail.errMsg)	    }				
		}
	}
</script>

<style>
	.centent{
		height: 500px;
		width: 100%;
		padding: 4px 10px;
	}
	.label{
		color: #333333;
		width: 5em;
	} 
	.flex-wrap{
		display: flex;
		flex-direction: row;
	}
	.input-wrap{
		background:#FFFFFF;
		border-bottom: 1px solid #eee;
		margin: 0 -12px;
		padding: 0 12px;
		height: 46px;
		line-height: 46px;
	}
	.account-info-input{
		font-size: 18px;
		line-height: 100%;
		margin: 4px;
		}
</style>
